<template>
  <div class="gaodeMap">
    <div class="demo-image__placeholder">
      <div class="block">
        <span class="demonstration">高德地图</span>
        <el-image :src="src"></el-image>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" plain @click="toAbout">查看详情</el-button>
    </div>
    <div class="amap-page-container">
      <el-amap
        ref="map"
        vid="amapDemo"
        :amap-manager="amapManager"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      ></el-amap>
    </div>
  </div>
</template>

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
  data() {
    return {
      amapManager,
      zoom: 15,
      center: [116.307824,39.950832],
      events: {
        init: o => {
          o.getCity(result => {
            console.log(result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: e => {
          console.log(e);
          alert("map clicked");
        }
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            }
          }
        }
      ],
      src:
        "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=4143512986,1142743253&fm=85&app=79&f=JPG?w=121&h=75&s=96E5FC169CF069804FE815C60300E0B2"
    };
  },
  methods:{
    toAbout(){
      // const { href } = this.$router.resolve({path:'/about'})
      // window.open(href,'_blank')
      window.open('http://localhost:2001/about','_blank')
      // this.$router.push('/about')
    }
  }
};
</script>

<style lang="scss">
.gaodeMap {
  overflow: hidden;
  .block {
    margin: 30px 0;
    text-align: center;
    .demonstration{
      line-height: 50px;
    }
    .el-image {
      width: 300px;
      display: block;
      margin: 0 auto;
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }
  .amap-page-container {
    width: 80%;
    height: 500px;
    margin: 0 auto;
    .amap-demo {
      height: 100%;
    }
  }
}
</style>